<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 移动端兼容 -->
    	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<title>layMin示例</title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<link rel="stylesheet" href="layMin/layMin.min.css" />
		<style>
			body{
				padding: 10px;
			}
			.box-content{
				margin-bottom: 30px;
				position: relative;
			}
			.box-load{
				width: 200px;
			    height: 200px;
			    background: #c7e5ff;
			    border-radius: 5px;
			    margin-left: 10px;
			    margin-top: 10px;
			    position: relative;
			    display: inline-block;
			}
			.box-load5{
				position: absolute;
				background: #76a6ff;
				height: 2px;
				width: 0;
				top: 0;
				left: 0;
			}
			.layui-btn{
				margin-bottom: 10px;
			}
		</style>
	</head>
	<script src="layui/jquery-3.2.1.min.js"></script>
	<script src="layMin/layMin.min.js"></script>
	<body>
		<div class="box-content">
			<div class="lay-min-title-max">头部提示框</div>
			<div style="padding: 20px;">
				<a class="layui-btn layui-btn-primary" id="head_tips1">手动关闭(默认)</a>
				<a class="layui-btn layui-btn-primary" id="head_tips2">自动关闭</a>
				<a class="layui-btn layui-btn-primary" id="head_tips3">模拟手动关闭</a>
				<a class="layui-btn layui-btn-primary" id="head_tips4">成功提示</a>
				<a class="layui-btn layui-btn-primary" id="head_tips5">失败提示</a>
				<a class="layui-btn layui-btn-primary" id="head_tips6">异常提示</a>
				<a class="layui-btn layui-btn-primary" id="head_tips7">通用提示</a>
				<a class="layui-btn layui-btn-primary" id="head_tips8">疑问提示</a>
			</div>
		</div>
		<script>
			/**
			 * ------------------------------------------------------------------------------------------------------------------------------------
			 * 【提示框示例】
			 * elem：容器，默认body
			 * msg：提示内容
			 * iconIndex: 默认图标五种 下标 0~4（'绿、红、黄、蓝、黑'），使用自定义图标后失效
			 * icon：自定义图片（如：<i class="lay-min-icon lay-min-tips-icon">&#xe62b;</i>）
			 * line：是否显示倒计时线条
			 * time：秒（关闭时间设置）
			 * offset: top/right，默认top
			 * stype：是否提示停止自动关闭类型：1 鼠标放上后停止，移开后继续 2 鼠标放上后停止，需手动关闭
			 * timeDesc：是否开启倒计时数字
			 * animBg：背景开启闪烁
			 * closeIcon: true 是否开启关闭操作，默认开启
			 * anim：是指背景阴影闪动，默认false，true开启
			 */
			$(function(){
				$("#head_tips1").click(function(){
					layMin.tips({msg: "操作成功", iconIndex: 0, time: 0});
				})
				$("#head_tips2").click(function(){
					layMin.tips({msg: "操作成功", iconIndex: 0, offset: 'top'});
				})
				$("#head_tips3").click(function(){
					// 模拟手动关闭
					var index = layMin.tips({msg: "操作成功", iconIndex: 0, offset: 'top', time: 0});
					setTimeout(function(){
						layMin.close(index);
					}, 3000)
				})
				$("#head_tips4").click(function(){
					layMin.tips({elem: "body", msg: "添加成功", iconIndex: 0, stype: 1, time: 5});
				})
				$("#head_tips5").click(function(){
					layMin.tips({elem: "body", msg: "参数错误", iconIndex: 1, stype: 1, time: 5});
				})
				$("#head_tips6").click(function(){
					layMin.tips({elem: "body", msg: "系统异常", iconIndex: 2, stype: 2, time: 5});
				})
				$("#head_tips7").click(function(){
					layMin.tips({elem: "body", msg: "通用提示", iconIndex: 3, stype: 2, time: 5});
				})
				$("#head_tips8").click(function(){
					layMin.tips({elem: "body", msg: "疑问提示", iconIndex: 4, stype: 2, time: 5});
				})
			})
		</script>
		<div class="box-content">
			<div class="lay-min-title-max">侧边提示框</div>
			<div style="padding: 20px;">
				<a class="layui-btn layui-btn-primary" id="right_tips1">左上弹出</a>
				<a class="layui-btn layui-btn-primary" id="right_tips2">中上弹出</a>
				<a class="layui-btn layui-btn-primary" id="right_tips3">右上弹出</a>
				<a class="layui-btn layui-btn-primary" id="right_tips4">左下弹出</a>
				<a class="layui-btn layui-btn-primary" id="right_tips5">中下弹出</a>
				<a class="layui-btn layui-btn-primary" id="right_tips6">右下弹出</a>
				<a class="layui-btn layui-btn-primary" id="right_tips7">右上弹出（消息提示）</a>
				<a class="layui-btn layui-btn-primary" id="right_tips8">右上弹出（消息提示-不关闭）</a>
			</div>
		</div>
		<script>
			$(function(){
				var rt1 = 0, rt2 = 0, rt3 = 0, rt4 = 0, rt5 = 0, rt6 = 0;
				$("#right_tips1").click(function(){
					rt1 ++;
					layMin.tips({msg: "左上弹出"+rt1, offset: 'left', iconIndex: 0, time: 5});
				})
				$("#right_tips2").click(function(){
					rt2 ++;
					layMin.tips({msg: "中上弹出"+rt2, offset: 'top', iconIndex: 0, time: 5});
				})
				$("#right_tips3").click(function(){
					rt3 ++;
					layMin.tips({msg: "右上弹出"+rt3, offset: 'right', iconIndex: 0, time: 5});
				})
				$("#right_tips4").click(function(){
					rt4 ++;
					layMin.tips({msg: "左下弹出"+rt4, offset: 'left-bottom', iconIndex: 0, time: 5});
				})
				$("#right_tips5").click(function(){
					rt5 ++;
					layMin.tips({msg: "中下弹出"+rt5, offset: 'bottom', iconIndex: 0, time: 5});
				})
				$("#right_tips6").click(function(){
					rt6 ++;
					layMin.tips({msg: "右下弹出"+rt6, offset: 'right-bottom', iconIndex: 0, time: 5});
				})
				// 只能用于边上，中间提示无法正常使用的
				$("#right_tips7").click(function(){ 
					var icon = Math.floor(Math.random() * 4); // 随机图标
					layMin.tips({title: '提示', msg: "这是一条自动关闭的消息", offset: 'right', iconIndex: icon, time: 5});
				})
				$("#right_tips8").click(function(){
					layMin.tips({title: '提示', msg: "这是一条不会自动关闭的消息", offset: 'right', iconIndex: 0, time: 0});
				})
			})
		</script>
		<div class="box-content">
			<div class="lay-min-title-max">其他提示框</div>
			<div style="padding: 20px;">
				<a class="layui-btn layui-btn-primary" id="tips0">没有设置图标</a>
				<a class="layui-btn layui-btn-primary" id="tips1">没有关闭图标</a>
				<a class="layui-btn layui-btn-primary" id="tips2">开启线条倒计时（鼠标移入暂停计时，移开继续计时）</a>
				<a class="layui-btn layui-btn-primary" id="tips3">开启数字倒计时（鼠标移入停止计时，自定义图标）</a>
				<a class="layui-btn layui-btn-primary" id="tips4">消息未处理（多属性自定义，开启阴影闪烁）</a>
			</div>
		</div>
		<script>
			$(function(){
				$("#tips0").click(function(){
					layMin.tips({msg: "没有设置图标", time: 5});
				})
				$("#tips1").click(function(){
					layMin.tips({msg: "没有设置图标", iconIndex: 0, time: 5, closeIcon: false});
				})
				$("#tips2").click(function(){
					layMin.tips({msg: "张三获得勋章", iconIndex: 3, stype: 1, offset: 'right', line: true, time: 10});
				})
				$("#tips3").click(function(){
					var icon = '<i class="lay-min-icon lay-min-tips-icon" style="color: #39bcff">&#xe899;</i>';
					layMin.tips({msg: "李四获取荣誉", icon: icon, stype: 2, offset: 'right', timeDesc: true, time: 10});
				})
				$("#tips4").click(function(){
					var layMinIndex = layMin.tips({msg: "您有一条消息未处理", iconIndex: 3, offset: 'right', animBg: true, line: true, click: function(){
						layMin.tips({msg: "点击成功", iconIndex: 0, offset: 'top', time: 3});
						layMin.close(layMinIndex);
					}});
				})
			})
		</script>
		<div class="box-content">
			<div class="lay-min-title-max">加载中示例</div>
			<span class="box-load box-load0"></span>
			<span class="box-load box-load00"></span>
			<span class="box-load box-load1"></span>
			<span class="box-load box-load2"></span>
			<span class="box-load box-load3"></span>
			<span class="box-load box-load4"></span>
			<span class="box-load5"></span>
			<hr />
			<div style="padding: 20px;">
				<a class="layui-btn" id="submit">立即提交</a>
			</div>
		</div>
		<script>
			// 容器必须设置 position: relative;
			// 不然会以设置了定位的那个父元素来覆盖加载
			$(function(){
				// 开始提交
				$("#submit").click(function(){
					layMin.loadSubmit({elem: '#submit', msg: '正在提交'});
					setTimeout(function(){
						layMin.closeSubmit({elem: '#submit', msg: '立即提交'});
						layMin.tips({iconIndex: 0, msg: "提交成功", time: 3});
					}, 3000)
				})
				// 容器块加载中
				setTimeout(function(){
					 /*
					 * bg: 背景填充颜色（遮罩层）
					 * fontSize: 图标大小
					 * color: 颜色
					 * time：毫秒
					 * icon：1两个半圆 2半圆 （type:1下使用）
					 * type: 加载类型 1~4
					 * text: 提示内容 （type:1下使用）
					 * */
					var index = layMin.load({elem: ".box-load0"});
					var index = layMin.load({elem: ".box-load00", type: 1, text: '正在上传中', windth: 80, height: 35});
					var index = layMin.load({elem: ".box-load1", bg: ['white', 0.2], type: 1, icon: 1});
					var index = layMin.load({elem: ".box-load2", bg: ['white', 0.5], type: 2, fontSize: 25});
					var index = layMin.load({elem: ".box-load3", bg: ['white', 0.8], type: 3});
					var index = layMin.load({elem: ".box-load4", bg: ['white'], type: 4});

					// layMin.close(index, 10); // 关闭

					// 线条
					var num = 0;
					var tempInter = setInterval(function(){
						num += 10;
						$(".box-load5").css("width", num+"%");
						if(num >= 100){
							clearInterval(tempInter);
							$(".box-load5").fadeOut(500);
							setTimeout(function(){
								$(".box-load5").remove();
							}, 500)
						}
					}, 10)

				}, 1000)
			})
		</script>
		<div class="box-content">
			<div class="lay-min-title-max">图片预览示例</div>
			<div style="padding: 20px;">
				<a class="layui-btn layui-btn-primary" id="lookImg">预览图片</a>
			</div>
		</div>
		<script>
			$(function(){
				// 预览图片
				$("#lookImg").click(function(){
					//layMin.photo({src: 'img/1.jpg'});
					// https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/0E/ChMkJ1bKwgqIeWe1AASOmguppkIAALGhwItj1oABI6y838.jpg
					// https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/0E/ChMkJ1bKwXaIXdnDAAjG6xki36wAALGYgPXmb0ACMcD412.jpg
					// https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/01/ChMkJlbKxIyIWz54AAMNLrWipssAALHIgPz3BoAAw1G539.jpg
					layMin.photo({src: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/0E/ChMkJ1bKwXaIXdnDAAjG6xki36wAALGYgPXmb0ACMcD412.jpg'});
				})
			})
		</script>
		<div class="box-content">
			<div class="lay-min-title-max">弹窗示例预览</div>
			<div style="padding: 20px;">
				<a class="layui-btn layui-btn-primary" id="lay-open1">打开内容</a>
				<a class="layui-btn layui-btn-primary" id="lay-open11">打开提示框</a>
				<a class="layui-btn layui-btn-primary" id="lay-open111">打开关闭所有</a>
				<a class="layui-btn layui-btn-primary" id="lay-open2">左侧边打开</a>
				<a class="layui-btn layui-btn-primary" id="lay-open3">右侧边打开</a>
				<a class="layui-btn layui-btn-primary" id="lay-open33">右侧边打开95%</a>
				<a class="layui-btn layui-btn-primary" id="lay-open4">上往下打开</a>
				<a class="layui-btn layui-btn-primary" id="lay-open44">上往下打开10%</a>
				<a class="layui-btn layui-btn-primary" id="lay-open5">下往上打开</a>
				<a class="layui-btn layui-btn-primary" id="lay-open6">打开新网站</a>
			</div>
		</div>
		<div id="container" style="padding: 10px;display: none;">
			《末世:我的关键词比别人多一个》
				勇敢、猥琐、善良、刁滑、宽厚、贪婪、优雅、凶狠、快乐、变态、正直、假正经……
			在这个末日一般的世界，只有在异星战场取胜才能获取资源，保证文明的延续。
			每个进入异星战场的战士，都会随机获得一个属于自己的关键词。
			言行契合关键词，各项属性便会飞速成长，获得超人一样的能力，反之，人设崩塌，便会迅速削弱；
			这是一个拼演技的世界；
			演技即是吃喝，演技即是荣耀，演技即是特权，演技即是生命……
		</div>
		<script id="box" type="text/html">
			<div style="padding: 10px;">
				万古神帝 万古神帝飞天鱼免费阅读无弹窗 万古神帝之夏氏神族 万古神帝西红柿 万古神帝最新章飞天鱼起点中文网 万古神帝无边 万古神帝修炼 万古神帝飞天鱼笔趣阁免费阅读 万古神帝飞天鱼最新章节列表免费阅读 万古神帝不灭法体大成 万古神帝阿芙雅 万古神帝在线阅读 万古神帝飞天鱼最新章节列表 万古神帝 无弹窗 万古神帝网站 万古神帝张羽烟 万古神帝慕容家族 万古神帝 在线 万古神帝轩辕玄帝 万古神帝尧神尊 万古神帝轩辕银城 万古神帝柳书竹 万古神帝最新版本 万古神帝空梵宁 万古神帝池昆仑 万古神帝涅藏尊者 万古神帝蒙戈 万古神帝女主有几个 万古神帝漫画在线阅读 万古神帝元笙 万古神帝怒天神尊 万古神帝无月 万古神帝九鼎 万古神帝免费阅读最新章节 万古神帝酆都大帝 万古神帝张若尘最新章节笔趣阁 万古神帝两位量尊 万古神帝空城子 万古神帝碲 万古神帝 笔趣阁 万古神帝免费最新章节 万古神帝txt免费下载 万古神帝笔趣阁无弹窗最新章节 万古神帝龙大胆笔趣阁 万古神帝起点中文网文 万古神帝无弹窗免费阅读全文 万古神帝最新章节笔趣阁 万古神帝最新章节更新小说 万古神帝飞天鱼最新章节免费阅读 万古神帝池瑶 万古神帝飞天鱼笔趣阁无弹窗最新章节 万古神帝起点中文网 万古神帝下载 万古神帝张若尘最新 万古神帝最新 万古神帝txt 万古神帝笔趣阁无弹窗 万古神帝张若尘完本 万古神帝女主 万古神帝起点中文网小说 万古神帝最新章节列表飞天鱼笔趣阁 万古神帝飞天鱼最新章节 万古神帝百科 万古神帝贴吧 万古神帝境界划分 万古神帝笔趣阁最新章节列表 万古神帝紫茜结局 万古神帝飞天鱼贴吧 万古神帝张若尘笔趣阁 万古神帝下载txt免费下载 万古神帝飞天鱼笔趣阁无弹窗最新章节起点 万古神帝顶点最新章节列表 万古神帝免费阅读 万古神帝张若尘完整版 万古神帝最新章节目录 万古神帝张若尘最新章节列表 万古神帝飞天鱼最新更新免费 万古神帝最新更新免费 万古神帝张若尘最新章节 万古神帝起点中文 万古神帝起点 万古神帝飞天鱼无弹窗 万古神帝顶点 万古神帝飞天鱼起点 万古神帝最新章节更新 万古神帝小说 万古神帝张若尘免费 万古神帝笔趣阁 万古神帝最新章节列表 万古神帝飞天鱼免费阅读 万古神帝张若尘免费阅读全文 万古神帝飞天鱼笔趣阁 万古神帝飞天鱼 万古神帝
			</div>
		</script>
		<script>
			$(function(){
				// --------------------------------------------------弹框------------------------------------------------------
				// 打开内容
				$("#lay-open1").click(function(){
					layMin.openLayer({
						elem: "body", // 在哪个容器弹出
						type: 2, // 弹框类型：1、内容，2 、html元素标签 3、iframe页面
						title: '打开内容', // 弹框标题，可设置false
						tbBorder: [false, false], // 弹框上下线条
						//colseIcon: false, // 是否隐藏关闭按钮
						shade: false, // 背景透明度0 ~ 1，可设置false
						minMax: true, // 点击全屏
						//shadeClose: true, // 点击遮罩关闭
						//time: 3000, // 自动关闭时间（毫秒）
						width: '800', // 弹框宽度
						height: '500', // 弹框高度
						//fullScreen: true, // 是否全屏
						btns:{// 自定义按钮，取消按钮设置false（oldArr和newArr，二选一，其中newArr优先）
							oldArr: ['提交', '关闭'], // 默认['确认', '取消']
							//newArr: ['<a class="lay-min-layer-btn">点击我</a>', '<a class="lay-min-layer-btn lay-min-layer-btn-not">关闭</a>'],
						},
						anim: 0, // 动画 0 ~ 5 ，可设置false
						content: "#container", // 内容
						close: function(index){
							console.log(index);
							console.log("右上角图标关闭");
						},
						yes: function(index, elem){
							console.log("确认");
							//layMin.closeLayer(index);
							// 添加加载中
							layMin.loadSubmit({elem: elem.find(".lay-min-layer-btn-yes"), msg:'确认'})
							setTimeout(function(){
								layMin.tips({msg: "提交成功", iconIndex: 0, time: 3});
								layMin.closeSubmit({elem: elem.find(".lay-min-layer-btn-yes"), msg:'确认'})
							}, 2000)
						},
						not: function(index){
							console.log("关闭");
							layMin.closeLayer(index);
						},
						success: function(index, elem){
							console.log("成功渲染");
						},
					})
				})

				// 确认框
				$("#lay-open11").click(function(){
					layMin.confirm({
						title: '提示', // 弹框标题，可设置空值''，可设置false
						//offset: {'right': 'unset', 'bottom': 'unset','top': '20%'}, // 弹出位置，unset代表取消样式
						icon: 1, // 图标：0~2
						//shade: 0.5, // 背景透明度0 ~ 1，可设置false
						//shadeClose: true, // 点击遮罩关闭
						text: "确认要删除这条记录吗？", // 内容
						yes: function(index, elem){
							console.log("确认");
							layMin.closeLayer(index);
							layMin.tips({elem: "body", msg: "确认成功", offset: 'top', time: 3});
						},
					})
				})

				// 确认框-全部关闭
				$("#lay-open111").click(function(){
					layMin.confirm({
						title: '提示', // 弹框标题，可设置空值''，可设置false
						offset: {'right': 'unset', 'bottom': 'unset','top': '20%'}, // 弹出位置，unset代表取消样式
						icon: 1, // 图标：0~2
						shade: false, // 背景透明度0 ~ 1，可设置false
						//shadeClose: true, // 点击遮罩关闭
						text: "确认要删除这条记录吗？", // 内容
						btns:{// 自定义按钮，取消按钮设置false（oldArr和newArr，二选一，其中newArr优先）
							oldArr: ['关闭全部', '关闭'], // 默认['确认', '取消']
						},
						yes: function(index, elem){
							console.log("确认");
							layMin.closeLayerAll();
							layMin.tips({elem: "body", msg: "确认成功", offset: 'top', time: 3});
						},
					})
				})

				// 左侧边打开
				$("#lay-open2").click(function(){
					layMin.openLayer({
						elem: "body", // 在哪个容器弹出
						type: 1, // 弹框类型：1、内容，2 、html元素标签 3、iframe页面
						title: '打开内容', // 弹框标题，可设置false
						//colseIcon: false, // 是否隐藏关闭按钮
						shade: 0.2, // 背景透明度0 ~ 1，可设置false
						shadeClose: true, // 点击遮罩关闭
						//time: 3000, // 自动关闭时间（毫秒）
						width: '500', // 弹框宽度
						height: '100%', // 弹框高度
						offset: {'right': 'unset', 'bottom': '0px', 'left': '0px','top': 'unset'}, // 弹出位置，unset代表取消样式
						//fullScreen: true, // 是否全屏
						anim: 2, // 动画 0 ~ 5 ，可设置false
						content: $("#box").html(), // 内容
						close: function(index){
							console.log(index);
							console.log("右上角图标关闭");
						},
						yes: function(index){
							console.log("确认");
							layMin.closeLayer(index);
						},
						not: function(index){
							console.log("关闭");
							layMin.closeLayer(index);
						},
						success: function(index, elem){
							console.log("成功渲染");
						},
					})
				})
				// 右侧边打开
				$("#lay-open3").click(function(){
					layMin.openLayer({
						elem: "body", // 在哪个容器弹出
						type: 1, // 弹框类型：1、内容，2 、html元素标签 3、iframe页面
						title: '打开内容', // 弹框标题，可设置false
						//colseIcon: false, // 是否隐藏关闭按钮
						shade: 0.2, // 背景透明度0 ~ 1，可设置false
						shadeClose: true, // 点击遮罩关闭
						//time: 3000, // 自动关闭时间（毫秒）
						width: '500', // 弹框宽度
						height: '100%', // 弹框高度
						offset: {'right': '0px', 'bottom': '0px', 'left': 'unset','top': 'unset'}, // 弹出位置，unset代表取消样式
						//fullScreen: true, // 是否全屏
						anim: 3, // 动画 0 ~ 5 ，可设置false
						content: $("#box").html(), // 内容
						close: function(index){
							console.log(index);
							console.log("右上角图标关闭");
						},
						yes: function(index){
							console.log("确认");
							layMin.closeLayer(index);
						},
						not: function(index){
							console.log("关闭");
							layMin.closeLayer(index);
						},
						success: function(index, elem){
							console.log("成功渲染");
						},
					})
				})
				// 右侧边95%
				$("#lay-open33").click(function(){
					layMin.openLayer({
						elem: "body", // 在哪个容器弹出
						type: 1, // 弹框类型：1、内容，2、iframe页面
						title: '打开内容', // 弹框标题，可设置false
						//colseIcon: false, // 是否隐藏关闭按钮
						shade: 0.2, // 背景透明度0 ~ 1，可设置false
						shadeClose: true, // 点击遮罩关闭
						//time: 3000, // 自动关闭时间（毫秒）
						width: '500', // 弹框宽度
						height: '95%', // 弹框高度
						offset: {'right': '0px', 'bottom': '0px', 'left': 'unset','top': 'unset'}, // 弹出位置，unset代表取消样式
						//fullScreen: true, // 是否全屏
						anim: 1, // 动画 0 ~ 5 ，可设置false
						content: $("#box").html(), // 内容
						close: function(index){
							console.log(index);
							console.log("右上角图标关闭");
						},
						yes: function(index){
							console.log("确认");
							layMin.closeLayer(index);
						},
						not: function(index){
							console.log("关闭");
							layMin.closeLayer(index);
						},
						success: function(index, elem){
							console.log("成功渲染");
						},
					})
				})
				// 从上往下打开
				$("#lay-open4").click(function(){
					layMin.openLayer({
						elem: "body", // 在哪个容器弹出
						type: 1, // 弹框类型：1、内容，2 、html元素标签 3、iframe页面
						title: '打开内容', // 弹框标题，可设置false
						//colseIcon: false, // 是否隐藏关闭按钮
						shade: 0.2, // 背景透明度0 ~ 1，可设置false
						shadeClose: true, // 点击遮罩关闭
						//time: 3000, // 自动关闭时间（毫秒）
						width: '100%', // 弹框宽度
						height: '300', // 弹框高度
						offset: {'right': 'unset', 'bottom': 'unset', 'left': '0px','top': '0px'}, // 弹出位置，unset代表取消样式
						//fullScreen: true, // 是否全屏
						anim: 0, // 动画 0 ~ 5 ，可设置false
						content: $("#box").html(), // 内容
						close: function(index){
							console.log(index);
							console.log("右上角图标关闭");
						},
						yes: function(index){
							console.log("确认");
							layMin.closeLayer(index);
						},
						not: function(index){
							console.log("关闭");
							layMin.closeLayer(index);
						},
						success: function(index, elem){
							console.log("成功渲染");
						},
					})
				})
				// 从上往下打开10%
				$("#lay-open44").click(function(){
					var s = '<div style="padding: 15px;text-align: center;font-weight: bold;">可按Esc关闭</div>';
					var layIndex = layMin.openLayer({
						elem: "body", // 在哪个容器弹出
						type: 1, // 弹框类型：1、内容，2 、html元素标签 3、iframe页面
						title: '打开内容', // 弹框标题，可设置false
						//colseIcon: false, // 是否隐藏关闭按钮
						shade: 0.2, // 背景透明度0 ~ 1，可设置false
						shadeClose: true, // 点击遮罩关闭
						//time: 3000, // 自动关闭时间（毫秒）
						width: '500', // 弹框宽度
						height: '500', // 弹框高度
						offset: {'right': 'unset', 'bottom': 'unset','top': '10%'}, // 弹出位置，unset代表取消样式
						//fullScreen: true, // 是否全屏
						anim: 0, // 动画 0 ~ 5 ，可设置false
						content: s + $("#box").html(), // 内容
						close: function(index){
							console.log(index);
							console.log("右上角图标关闭");
						},
						yes: function(index){
							console.log("确认");
							layMin.closeLayer(index);
						},
						not: function(index){
							console.log("关闭");
							layMin.closeLayer(index);
						},
						success: function(index, elem){
							console.log("成功渲染");
						},
					})
					// 多窗口模式 - esc 键
					$(document).on('keyup', function(e) {
						if(e.keyCode === 27) {
							layMin.closeLayer(layIndex);
						}
					});
				})
				// 从下往上打开
				$("#lay-open5").click(function(){
					layMin.openLayer({
						elem: "body", // 在哪个容器弹出
						type: 1, // 弹框类型：1、内容，2 、html元素标签 3、iframe页面
						title: '打开内容', // 弹框标题，可设置false
						//colseIcon: false, // 是否隐藏关闭按钮
						shade: 0.2, // 背景透明度0 ~ 1，可设置false
						shadeClose: true, // 点击遮罩关闭
						//time: 3000, // 自动关闭时间（毫秒）
						width: '100%', // 弹框宽度
						height: '300', // 弹框高度
						offset: {'right': '0px', 'bottom': '0px', 'left': 'unset','top': 'unset'}, // 弹出位置，unset代表取消样式
						//fullScreen: true, // 是否全屏
						anim: 1, // 动画 0 ~ 5 ，可设置false
						content: $("#box").html(), // 内容
						close: function(index){
							console.log(index);
							console.log("右上角图标关闭");
						},
						yes: function(index){
							console.log("确认");
							layMin.closeLayer(index);
						},
						not: function(index){
							console.log("关闭");
							layMin.closeLayer(index);
						},
						success: function(index, elem){
							console.log("成功渲染");
						},
					})
				})
				// 打开新网址
				$("#lay-open6").click(function(){
					layMin.openLayer({
						elem: "body",
						type: 3,
						title: false,
						shade: 0.2,
						width: '800',
						height: '600',
						btns: false,
						content: 'index.html',
						close: function(index){
							console.log(index);
						},
						yes: function(index){
							console.log("确认");
							layMin.closeLayer(index);
						},
						not: function(index){
							console.log("关闭");
							layMin.closeLayer(index);
						},
						success: function(index, elem){
							console.log("成功渲染");
						},
					})
				})


			})

		</script>
	</body>
</html>
